<template>
  <div class="tabs-container" v-if="tabsStore.hasTabs">
    <div class="tabs-wrapper">
      <div class="tabs-list" ref="tabsListRef">
        <div
          v-for="tab in tabsStore.tabs"
          :key="tab.id"
          class="tab-item"
          :class="{ 'active': tab.id === tabsStore.activeTabId }"
          @click="handleTabClick(tab)"
          @contextmenu.prevent="handleRightClick($event, tab)"
        >
          <i v-if="tab.icon" :class="tab.icon" class="tab-icon"></i>
          <span class="tab-title">{{ tab.title }}</span>
          <i
            v-if="tab.closable !== false"
            class="pi pi-times tab-close"
            @click.stop="handleCloseTab(tab.id)"
          ></i>
        </div>
      </div>
      
      <!-- 页签操作按钮 -->
      <div class="tabs-actions">
        <Button
          icon="pi pi-refresh"
          text
          rounded
          size="small"
          @click="handleRefreshTab"
          :disabled="!tabsStore.activeTab"
          class="action-button"
          title="刷新当前页签"
        />
        <Button
          icon="pi pi-times"
          text
          rounded
          size="small"
          @click="handleCloseOtherTabsFromButton"
          :disabled="tabsStore.tabs.length <= 1"
          class="action-button"
          title="关闭其他页签"
        />
        <Button
          icon="pi pi-times-circle"
          text
          rounded
          size="small"
          @click="handleCloseAllTabs"
          :disabled="tabsStore.tabs.length === 0"
          class="action-button"
          title="关闭所有页签"
        />
      </div>
    </div>
    
    <!-- 右键菜单 -->
    <div 
      v-if="showContextMenu" 
      class="context-menu"
      :style="{ left: contextMenuPosition.x + 'px', top: contextMenuPosition.y + 'px' }"
      @click.stop
    >
      <div class="context-menu-item" @click="handleRefreshCurrentTab">
        <i class="pi pi-refresh"></i>
        <span>刷新页面</span>
      </div>
      <div class="context-menu-item" @click="handleCloseLeftTabs">
        <i class="pi pi-angle-double-left"></i>
        <span>关闭左侧</span>
      </div>
      <div class="context-menu-item" @click="handleCloseRightTabs">
        <i class="pi pi-angle-double-right"></i>
        <span>关闭右侧</span>
      </div>
      <div class="context-menu-item" @click="handleCloseOtherTabs">
        <i class="pi pi-times"></i>
        <span>关闭其他</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" @click="handleCloseAllTabs">
        <i class="pi pi-times-circle"></i>
        <span>关闭所有</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useTabsStore } from '../../store/modules/tabs'
import Button from 'primevue/button'

const tabsStore = useTabsStore()
const tabsListRef = ref<HTMLElement>()

// 右键菜单相关
const showContextMenu = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
const contextMenuTab = ref<any>(null)

// 页签点击处理
const handleTabClick = (tab: any) => {
  tabsStore.setActiveTab(tab.id)
}

// 关闭页签处理
const handleCloseTab = (tabId: string) => {
  tabsStore.closeTab(tabId)
}

// 刷新当前页签
const handleRefreshTab = () => {
  if (tabsStore.activeTabId) {
    tabsStore.refreshTab(tabsStore.activeTabId)
  }
}

// 关闭其他页签（顶部按钮）
const handleCloseOtherTabsFromButton = () => {
  if (tabsStore.activeTabId) {
    tabsStore.closeOtherTabs(tabsStore.activeTabId)
  }
}

// 关闭所有页签
const handleCloseAllTabs = () => {
  tabsStore.closeAllTabs()
}

// 右键菜单处理
const handleRightClick = (event: MouseEvent, tab: any) => {
  event.preventDefault()
  contextMenuTab.value = tab
  contextMenuPosition.value = {
    x: event.clientX,
    y: event.clientY
  }
  showContextMenu.value = true
}

// 刷新当前页签
const handleRefreshCurrentTab = () => {
  if (contextMenuTab.value) {
    tabsStore.refreshTab(contextMenuTab.value.id)
  }
  hideContextMenu()
}

// 关闭左侧页签
const handleCloseLeftTabs = () => {
  if (contextMenuTab.value) {
    let currentIndex = tabsStore.tabs.findIndex(tab => tab.id === contextMenuTab.value.id)
    if (currentIndex > 0) {
      // 关闭当前页签左侧的所有页签
      for (let i = 0; i < currentIndex; i++) {
        const tab = tabsStore.tabs[i]
        if (tab.closable !== false) {
          tabsStore.removeTab(tab.id)
          i-- // 因为数组长度变化，需要调整索引
          currentIndex--
        }
      }
    }
  }
  hideContextMenu()
}

// 关闭右侧页签
const handleCloseRightTabs = () => {
  if (contextMenuTab.value) {
    let currentIndex = tabsStore.tabs.findIndex(tab => tab.id === contextMenuTab.value.id)
    if (currentIndex < tabsStore.tabs.length - 1) {
      // 关闭当前页签右侧的所有页签
      for (let i = tabsStore.tabs.length - 1; i > currentIndex; i--) {
        const tab = tabsStore.tabs[i]
        if (tab.closable !== false) {
          tabsStore.removeTab(tab.id)
        }
      }
    }
  }
  hideContextMenu()
}

// 关闭其他页签
const handleCloseOtherTabs = () => {
  if (contextMenuTab.value) {
    tabsStore.closeOtherTabs(contextMenuTab.value.id)
  }
  hideContextMenu()
}

// 隐藏右键菜单
const hideContextMenu = () => {
  showContextMenu.value = false
  contextMenuTab.value = null
}

// 键盘快捷键处理
const handleKeydown = (e: KeyboardEvent) => {
  // Ctrl + W: 关闭当前页签
  if (e.ctrlKey && e.key === 'w') {
    e.preventDefault()
    if (tabsStore.activeTabId) {
      handleCloseTab(tabsStore.activeTabId)
    }
  }
  
  // Ctrl + Shift + W: 关闭所有页签
  if (e.ctrlKey && e.shiftKey && e.key === 'W') {
    e.preventDefault()
    handleCloseAllTabs()
  }
  
  // Ctrl + R: 刷新当前页签
  if (e.ctrlKey && e.key === 'r') {
    e.preventDefault()
    handleRefreshTab()
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
  document.addEventListener('click', hideContextMenu)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
  document.removeEventListener('click', hideContextMenu)
})
</script>

<style scoped>
.tabs-container {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
}

.tabs-wrapper {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  position: relative;
}

.tabs-list {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
  align-items: center;
}

.tabs-list::-webkit-scrollbar {
  display: none;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  min-width: 120px;
  max-width: 200px;
  position: relative;
  margin-right: 2px;
}

.tab-item:hover {
  background: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.tab-item.active {
  background: #fff;
  border-color: #1890ff;
  border-bottom: 1px solid #fff;
  z-index: 2;
  margin-bottom: -1px;
  color: #1890ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1890ff;
}

.tab-icon {
  font-size: 14px;
  margin-right: 8px;
  color: #666;
  transition: all 0.3s ease;
}

.tab-item:hover .tab-icon {
  color: #1890ff;
}

.tab-item.active .tab-icon {
  color: #1890ff;
}

.tab-title {
  flex: 1;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  transition: all 0.3s ease;
}

.tab-item:hover .tab-title {
  color: #1890ff;
}

.tab-item.active .tab-title {
  color: #1890ff;
  font-weight: 500;
}

.tab-close {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
  padding: 2px;
  border-radius: 2px;
  transition: all 0.2s ease;
  opacity: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item:hover .tab-close {
  opacity: 1;
  color: #999;
}

.tab-close:hover {
  color: #ff4d4f;
  background-color: #fff2f0;
}

.tabs-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid #e8e8e8;
}

.action-button {
  width: 28px !important;
  height: 28px !important;
  color: #666 !important;
  border: none !important;
  background: transparent !important;
  padding: 4px !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

.action-button:hover {
  color: #1890ff !important;
  background-color: #f0f8ff !important;
}

.action-button:disabled {
  color: #ccc !important;
  background-color: transparent !important;
  cursor: not-allowed !important;
}

/* 右键菜单样式 - everwin-admin-vue 风格 */
.context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 160px;
  overflow: hidden;
  padding: 4px 0;
}

.context-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #333;
  gap: 8px;
  font-weight: 400;
  position: relative;
}

.context-menu-item:hover {
  background-color: #f5f5f5;
  color: #1890ff;
}

.context-menu-item i {
  font-size: 14px;
  width: 14px;
  text-align: center;
  color: #666;
  transition: all 0.2s ease;
}

.context-menu-item:hover i {
  color: #1890ff;
}

.context-menu-separator {
  height: 1px;
  background-color: #f0f0f0;
  margin: 4px 0;
}

/* 响应式设计 - everwin-admin-vue 风格 */
@media (max-width: 768px) {
  .tabs-wrapper {
    padding: 0 8px;
    height: 36px;
  }
  
  .tab-item {
    min-width: 100px;
    max-width: 150px;
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
  }
  
  .tab-title {
    font-size: 13px;
  }
  
  .tab-icon {
    font-size: 13px;
    margin-right: 6px;
  }
  
  .tabs-actions {
    margin-left: 8px;
    gap: 4px;
    padding-left: 8px;
  }
  
  .action-button {
    width: 24px !important;
    height: 24px !important;
    padding: 3px !important;
  }
  
  .context-menu {
    min-width: 140px;
    border-radius: 4px;
  }
  
  .context-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    gap: 6px;
  }
  
  .context-menu-item i {
    font-size: 13px;
    width: 13px;
  }
}

@media (max-width: 480px) {
  .tabs-wrapper {
    padding: 0 4px;
    height: 32px;
  }
  
  .tab-item {
    min-width: 80px;
    max-width: 120px;
    padding: 4px 8px;
  }
  
  .tab-title {
    font-size: 12px;
  }
  
  .tab-icon {
    font-size: 12px;
    margin-right: 4px;
  }
  
  .tabs-actions {
    margin-left: 4px;
    gap: 2px;
    padding-left: 4px;
  }
  
  .action-button {
    width: 20px !important;
    height: 20px !important;
    padding: 2px !important;
  }
}
</style>
